<template>

  <div class="head">
    <slot name="head-left"></slot>
    <span class="head_title">
        <span class="head_title_text ellipsis">{{title}}</span>
    </span>
    <slot name="head-right"></slot>
  </div>
</template>

<script>
  export default {
    name: "pagehead",
    props:{
      title:String
    },
    data() {
      return {};
    },
    methods: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .head
    background rgb(100, 200, 256)
    position fixed
    z-index 100
    left 0
    top 0
    width 100%
    height 45px
    .head_title
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
      width 50%
      color #fff
      text-align center
      .head_title_text
        font-size 20px
        color #fff
        display block
</style>
